@extends('layouts.master')
@section('content')
<div class="content-wrapper">
    <section class="content-header">
        <h3>
            <i class="fa" aria-hidden="true"></i> 商品管理

        </h3>
        <ol class="breadcrumb">
            <li>
                <a href=""><i class="fa fa-home"></i> Home</a>
            </li>
            <li>
                <a href="">商品管理</a>
            </li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">商品管理</h3> &nbsp&nbsp&nbsp
                        <a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-link btn-link-thin">添加</a>
                        <a href="#" id="delete" class="btn btn-link btn-link-thin">删除</a>
                        <a href="#" id="all-selected" class="btn btn-link btn-link-thin">全选</a>
                        </span>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="example2" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>产品名称</th>
                                <th>创建日期</th>
                                <th>更新日期</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($list as $value)
                                <tr>
                                    <td>
                                        <label><input type="checkbox" value="{{ $value->id }}"></label>
                                        <a href="{{ url('product/info', $value->id) }}">{{$value->id}}</a>
                                    </td>
                                    <td>{{ $value->name }}</td>
                                    <td>{{ $value->created_at }}</td>
                                    <td>{{ $value->updated_at }}</td>
                                    <td>
                                        <a href="#" data-toggle="modal" data-target="#myModal3"
                                           class="btn btn-link btn-link-thin" data-id="{{ $value->id }}">编辑</a>
                                        <a class="delete-alert btn btn-link btn-link-thin" data-id="{{ $value->id }}">删除</a>
                                        <a href="{{url('product/addparts/'.$value->id)}}">设置配件</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                        {{$list->links() }}
                    </div>
                    <!-- 模态框（添加） -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">添加产品</h4>
                                </div>
                                <form method="POST" action="{{ url('product/store') }}" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <!--内容-->
                                    <div class="modal-body motaikuang-tianjia">
                                        <div class="form-group">
                                            <label>产品名称</label>
                                            <input type="text" class="form-control" name="name">
                                        </div>
                                        <p>
                                            <button type="submit" class="btn bg-olive btn-flat margin">保存</button>
                                            <button type="button" class="btn bg-orange btn-flat margin btn-minwidth"
                                                    data-dismiss="modal">取消</button>
                                        </p>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- end 模态框（添加） -->
                    <!-- 模态框（编辑） -->
                    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">编辑产品</h4>
                                </div>
                                <!--内容-->
                                <form action="" method="POST" enctype="multipart/form-data">
                                    {{ csrf_field() }}
                                    <div class="modal-body motaikuang-tianjia">
                                        <div class="form-group">
                                            <label>产品名称</label>
                                            <input type="text" class="form-control" name="name">
                                        </div>

                                        <p>
                                            <button type="submit" class="btn bg-olive btn-flat margin">保存</button>
                                            <button type="button" class="btn bg-orange btn-flat margin btn-minwidth"
                                                    data-dismiss="modal">取消</button>
                                        </p>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- end 模态框（编辑） -->
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
@section('js')
    <script>
        $(function () {

            // 全选点击

            $("#all-selected").click(function() {
                if ($(this).hasClass("selected")) {
                    $("#all-selected").html('全选');
                    $("input[type='checkbox']").prop("checked", false);
                    $(this).removeClass("selected")
                } else {
                    $("#all-selected").html('取消全选');
                    $("input[type='checkbox']").prop("checked", true);
                    $(this).addClass("selected")
                }
                var $subs = $("input[type='checkbox']");
                $(this).prop("checked", $subs.length == $subs.filter(":checked").length ? true : false)
            });

            // 编辑

            $("#myModal3").on("show.bs.modal", function(e) {
                var button = $(e.relatedTarget);
                var _id = button.data("id");

                $(this).find(".modal-content form").attr("action", "/product/store/" + _id);
                var modal = $(this).find(".modal-body");
                $.ajax({
                    url: "/product/info/" + _id,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        if (data.rs == "true") {
                            modal.find("input[name=name]").val(data.data.name);
                        } else {
                            swal("查询失败", data.msg, "error")
                        }
                    },
                    error: function() {
                        swal("查询失败", "请重新尝试", "error")
                    }
                })
            });

            // 单条信息删除

            $(".delete-alert").on("click", function() {
                var product_id = $(this).data("id");
                var token = "{{ csrf_token()  }}";
                var dom = $(this).parents("tr");
                swal({
                    title: "您确定要删除此信息吗？",
                    text: "删除的信息不可恢复",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    cancelBUttonText: "取消",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function(isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "{{ url('product/delete') }}",
                            data: {
                                _id: product_id,
                                _token: token,
                            },
                            type: "post",
                            dataType: "json",
                            success: function(data) {
                                if (data.rs == "true") {
                                    dom.remove();
                                    swal("删除成功", "你选择的信息已删除", "success")
                                } else {
                                    swal("删除失败", data.msg, "error")
                                }
                            },
                            error: function() {
                                swal("删除失败", "未知错误,请刷新重新尝试!", "error")
                            }
                        })
                    }
                })
            });

            // 选中删除

            $("#delete").on("click", function() {
                var chk_value = [];
                $("input[type=checkbox]:checked").each(function() {
                    chk_value.push($(this).val())
                });
                if (chk_value.length == 0) {
                    swal("请选择经销商", "请选择你要删除的用户信息", "warning");
                    return false
                }
                swal({
                    title: "确认要删除选中的" + chk_value.length + "个汽车信息吗?",
                    text: "删除的汽车信息不可恢复",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    cancelBUttonText: "取消",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function(isConfirm) {
                    if (isConfirm) {
                        var product_id = chk_value.join();
                        var token = "{{ csrf_token()  }}";
                        $.ajax({
                            url: "{{ url('product/delete') }}",
                            data: {
                                _id : product_id,
                                _token : token,
                            },
                            type: "post",
                            dataType: "json",
                            success: function(data) {
                                if (data.rs == "true") {
                                    $("input[type=checkbox]:checked").each(function() {
                                        $(this).parents("tr").remove()
                                    });
                                    swal("删除成功", "你选择的汽车信息已删除", "success")
                                } else {
                                    swal("删除失败", data.msg, "error")
                                }
                            },
                            error: function() {
                                swal("删除失败", "未知错误,请刷新重新尝试!", "error")
                            }
                        })
                    }
                })
            });
        });
    </script>
@endsection
